<template>
  <p :class="{ 'shake-text': isShaking }"><slot></slot></p>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isShaking = ref(false)
// 触发抖动
function triggerShake() {
  isShaking.value = true

  // 指定时间后移除类，这里的时间应该等于动画持续时间
  setTimeout(() => {
    isShaking.value = false
  }, 500) // 这里的时间(500ms)要与CSS动画持续时间相匹配
}
defineExpose({
  triggerShake
})
</script>

<style scoped lang="scss">
/* 抖动动画 */
@keyframes shake {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-5px);
  }

  100% {
    transform: translateX(0);
  }
}

/* 抖动动画的类，用于触发动画 */
.shake-text {
  animation: shake 0.5s;
}
</style>
